import { useSelector, useDispatch } from "react-redux";
import React, { ReactElement, useEffect } from "react";
import Layout from "./Layout";
import { RootState } from "@/models";
import Search from "./Search";
import { Col, Row, Typography } from "antd";
import ProductItem from "./ProductItem";
import { ProductState, PRODUCT_EFFECT } from "@/models/product";
const { Title, Paragraph } = Typography;
interface Props {}

export default function Home(props: Props): ReactElement {
  const productState = useSelector<RootState, ProductState>(
    (state) => state.product
  );
  const { createdAt, sold } = productState;
  const dispatch = useDispatch();
  console.log(productState);
  useEffect(() => {
    dispatch({
      type: PRODUCT_EFFECT.handleProduct,
      payload: {
        sortBy: "createdAt",
        order: "desc",
        limit: 10,
      },
    });
    dispatch({
      type: PRODUCT_EFFECT.handleProduct,
      payload: {
        sortBy: "sold",
        order: "desc",
        limit: 10,
      },
    });
  }, []);
  return (
    <Layout title="拉勾商城" subTitle="尽情享受吧">
      <Search />
      <Title level={5}>最新上架</Title>
      <Row gutter={[16, 16]}>
        {createdAt.products.map((item) => (
          <Col key={item._id} span="6">
            <ProductItem product={item} />
          </Col>
        ))}
      </Row>
      <Title level={5} style={{ marginTop: "20px" }}>
        最受欢迎
      </Title>
      <Row gutter={[16, 16]}>
        {sold.products.map((item) => (
          <Col key={item._id} span="6">
            <ProductItem product={item} />
          </Col>
        ))}
      </Row>
    </Layout>
  );
}
